<template>
    <div class="page-container">
        <ClientOnly fallbackTag="div">
            <el-table
                :data="tableDatas"
                class="table"
            >
                <el-table-column
                    prop="date"
                    label="Date"
                    width="180"
                />
                <el-table-column
                    prop="name"
                    label="Name"
                    width="180"
                />
                <el-table-column
                    prop="address"
                    label="Address"
                />
            </el-table>

            <el-dropdown
                size="large"
                split-button
                type="primary"
            >
                Large
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item>Action 4</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

            <el-dropdown
                split-button
                type="primary"
            >
                Default
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item>Action 4</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

            <el-dropdown
                size="small"
                split-button
                type="primary"
            >
                Small
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item>Action 4</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <template #fallback>
                <!-- 这将在服务器端渲染 -->
                <MChartsSkeleton />
            </template>
        </ClientOnly>
        {{ data }}
    </div>
</template>

<script setup lang="ts">
    definePageMeta({
        keepalive: true, // 设置为keepAlive
        title: 'table',
    });

    type tableData = {
        date: string;
        name: string;
        address: string;
    };
    const tableDatas = ref<tableData[]>();
    // const loadTable = async () => {
    //     const { data } = await useServerRequest<ResPonseType<tableData[]>>('/api/table');
    //     tableDatas.value = data.value.data;
    // };
    // loadTable();
    const { data } = await useFetch('/api/table');
    tableDatas.value = data.value?.data;
</script>

<style lang="scss" scoped>
    .table {
        width: 100%;
        height: 200px;
    }
</style>
